<template>
  <div>
    <basic-container>
      <avue-crud
        :option="tableOption"
        :data="tableData"
        :table-loading="tableLoading"
        :page="page"
        ref="crud"
        @refresh-change="handleRefreshChange"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        @selection-change="handleSelectionChange"
        @row-update="handleUpdate"
        @search-change="handleSearchChange"
      >
        <template slot="menuLeft" v-if="!isSelect">
          <el-button
            type="primary"
            @click="handleExport"
            :loading="downloadLoading"
            icon="el-icon-download"
            v-perm="'/admin/video-channel/export'"
            size="small"
            >导出</el-button
          >
        </template>
        <template slot-scope="scope" slot="menu">
          <div>
            <el-button
              type="text"
              @click.stop="handleSelectDataItem(scope.row)"
              v-if="isSelect"
              icon="el-icon-edit"
              size="mini"
              >选择</el-button
            >
            <el-button
              type="danger"
              @click.stop="handleLiveGoods(scope.row)"
              icon="el-icon-edit"
              size="mini"
              >查看直播商品</el-button
            >
            <el-button
              type="text"
              @click.stop="handleSetRecord(scope.row, 1)"
              v-if="scope.row.openRecordFlag == 0"
              icon="el-icon-edit"
              size="mini"
              >开启录制</el-button
            >
            <el-button
              type="text"
              @click.stop="handleSetRecord(scope.row, 0)"
              v-if="scope.row.openRecordFlag == 1"
              icon="el-icon-edit"
              size="mini"
              >关闭录制</el-button
            >
            <el-button
              type="text"
              @click.stop="handleShowSetPlayView(scope.row)"
              icon="el-icon-edit"
              size="mini"
              >设置虚拟访问次数</el-button
            >
          </div>
        </template>
      </avue-crud>
    </basic-container>
    <el-dialog
      :visible.sync="playNumSetDialogShowed"
      title="设置直播间虚拟访问次数"
      width="400px"
    >
      <el-form
        :disabled="isSubmiting"
        :model="formData"
        :rules="joinNumFormRules"
        label-width="120px"
      >
        <el-form-item label="实际访问次数">
          {{ formData.joinNum }}
        </el-form-item>
        <el-form-item label="虚拟访问次数" prop="joinNumVirtual">
          <el-input-number
            v-model="formData.joinNumVirtual"
            placeholder="请设置虚拟访问次数"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="playNumSetDialogShowed = false">取消</el-button>
        <el-button
          :loading="isSubmiting"
          type="primary"
          @click="submitFormAction"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="liveGoodsDialogShow"
      title="直播间商品"
      width="1000px"
    >
      <el-table :data="liveGoodsLists" border style="width: 100%">
        <el-table-column type="index" align="center" label="序号" width="80">
        </el-table-column>
         <el-table-column prop="title" label="商品标题" width="180" align="center">
        </el-table-column>
        <!-- <el-table-column prop="categoryName" label="商品分类名称" width="180">
        </el-table-column> -->
        <el-table-column prop="goodsProps" label="商品规格" width="180">
          <template slot-scope="scope">
            {{scope.row.goodsProps | goodsPropsFilter}}
          </template>  
        </el-table-column>
        <el-table-column prop="goodsType" label="商品类型" width="180" align="center">
          <template slot-scope="scope">
            {{scope.row.goodsType | goodsTypeFilter}} 
          </template>
        </el-table-column>
        <el-table-column prop="mainImg" label="商品主图" width="180" align="center">
          <template slot-scope="scope">
            <!-- <img :src="scope.row.mainImg" alt="" style="width:100%;"> -->
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.mainImg"
              fit="contain"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="marketPrice" label="商品市场价" width="100" align="center">
        </el-table-column>
        <!-- <el-table-column prop="realName" label="商品所属用户姓名" width="180">
        </el-table-column>
        <el-table-column prop="saleNum" label="商品销量" width="180">
        </el-table-column>
        <el-table-column prop="supplierName" label="供应商名称" width="180">
        </el-table-column> -->
       
        <!-- <el-table-column
          prop="userMobile"
          label="商品所属用户手机号码"
          width="180"
        >
        </el-table-column> -->
        <el-table-column
          prop="videoChannelGoodsStatus"
          label="直播商品实时状态"
          width="180"
          align="center"
        >
        <template slot-scope="scope">{{scope.row.videoChannelGoodsStatus|GoodsStatusFilter}}</template>
        </el-table-column>
        <el-table-column prop="salePrice" label="商品销售价" width="100" align="center">
        </el-table-column>
        <el-table-column prop="checkOperator" label="审核人" width="80" align="center">
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :current-page.sync="livePage.pageNo"
          :page-sizes="[10,20,30, 50]"
          :page-size="livePage.pageSize"
          :total="livePage.total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleLiveGoodsSizeChange"
          @current-change="handleLiveGoodsCurrentChange"
        />
      </div>
    </el-dialog>
  </div>
</template>
  <script>
import { validatenull } from "@/util/validate";
// import { DIC } from "@/const/dic";
import { getLabelFromDicV2 } from "@/const/dic";
import { nowDate } from "../../util/date";
import * as apiObj from "../../api/videoChannel";
import { videoChannelTableOption } from "@/const/videoChannel/videoChannelTableOption.js";

export default {
  props: {
    isSelect: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      bachDeleting: false,
      formData: {
        joinNumVirtual: 0,
        joinNum: 0,
      },
      joinNumFormRules: {
        joinNumVirtual: [
          {
            required: true,
            message: "请输入虚拟访问次数",
            trigger: "change",
          },
        ],
      },
      isSubmiting: false,
      playNumSetDialogShowed: false,
      tableOption: {}, //表格设置属性
      tableData: [], //表格的数据
      downloadLoading: false,
      tableLoading: false,
      tableQueryParam: {},
      page: {
        total: 0, //总页数
        currentPage: 1, //当前页数
        pageSize: 10, //每页显示多少条
      },
      liveGoodsDialogShow: false,
      liveGoodsLists: [],
      livePage: {
        total:0,
        pageNo: 1, //当前页数
        pageSize: 10, //每页显示多少条
      },
    };
  },
  created() {
    //初始化数据格式
    this.tableOption = { ...videoChannelTableOption };
    if (this.isSelect) {
      this.tableOption.menu = true;
      this.tableOption.index = false;
      this.tableOption.selection = false;
    }
    this.handleList();
  },
  filters:{
    goodsTypeFilter(val){
      return {1:'平台商品',2:'主播商品'}[val]
    },
    GoodsStatusFilter(val){
      return {0:'下架',1:'上架'}[val]
    },
    goodsPropsFilter(val){
      console.log(val)
      return val
    }
  },
  methods: {
    handleLiveGoods(row) {
      this.livePage.channelNo = row.channelNo;
      apiObj.liveGoods(this.livePage).then((data) => {
        // this.livePage.total =data.total
        this.liveGoodsDialogShow = true;
        this.liveGoodsLists = data;
      });
    },
    handleLiveGoodsSizeChange(size) {
      this.livePage.pageSize = size;
      this.handleLiveGoods();
    },
    handleLiveGoodsCurrentChange(page) {
      this.livePage.pageNo = page;
      this.handleLiveGoods();
    },
    handleCurrentChange(page) {
      this.page.currentPage = page;
      this.handleList();
    },
    handleSizeChange(size) {
      this.page.pageSize = size;
      this.handleList();
    },
    // 开启或者关闭直播间录制功能
    handleSetRecord(row, flag) {
      const msg = flag == 1 ? "确认开启录制吗?" : "确认关闭录制吗?";
      this.showConfirm(msg, () => {
        apiObj
          .setRecord({
            channelNo: row.channelNo,
            flag,
          })
          .then(() => {
            this.success();
            this.handleList();
          });
      });
    },
    handleShowSetPlayView(row) {
      this.formData = row;
      this.playNumSetDialogShowed = true;
    },
    handleSelectDataItem(row) {
      this.$emit("onSelectVideoChannel", row);
    },
    handleSelectionChange(args) {
      this.currentSelectedRowIds = args.map((el) => el.id);
    },
    hasChanged(params1, params2) {
      return Object.keys(params1).some((key) => params2[key] != params1[key]);
    },
    handleSearchChange(params) {
      if (this.hasChanged(params, this.tableQueryParam)) {
        this.page.currentPage = 1;
      }
      this.tableQueryParam = params;
      this.handleList();
    },

    /**
     * @title 数据更新
     * @param row 为当前的数据
     * @param index 为当前更新数据的行数
     * @param done 为表单关闭函数
     *
     **/
    handleUpdate(row, index, done, reject) {
      apiObj
        .update(row)
        .then(() => {
          this.handleList();
          this.$message({
            showClose: true,
            message: "修改成功",
            type: "success",
          });
          done();
        })
        .catch(() => {
          reject();
        });
    },

    handleRefreshChange() {
      this.handleList();
    },
    /**
     * @title 获取数据
     * @detail 赋值为tableData表格即可
     *
     **/
    handleList() {
      this.tableLoading = true;
      apiObj
        .list({
          pageNo: this.page.currentPage,
          pageSize: this.page.pageSize,
          ...this.tableQueryParam,
        })
        .then((data) => {
          this.tableData = data.data || data.dataList || [];
          this.page.total = data.totalRecord;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    submitFormAction() {
      this.isSubmiting = true;
      apiObj
        .setJoinNum(this.formData.id, this.formData.joinNumVirtual)
        .then(() => {
          this.playNumSetDialogShowed = false;
          this.success();
        })
        .finally(() => {
          this.isSubmiting = false;
        });
    },
    handleExport() {
      this.downloadLoading = true;
      apiObj
        .list({
          pageNo: 1,
          pageSize: 3000,
          ...this.tableQueryParam,
        })
        .then((res) => {
          import("@/vendor/Export2Excel").then((excel) => {
            const columns = this.tableOption.column.filter(
              (el) => el.hide !== true && el.type != "upload"
            );
            const tHeader = columns.map((el) => el.label);
            const filterVal = columns.map((el) => el.prop);
            const data = this.formatJson(filterVal, res.data || res.dataList);

            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: "直播频道" + nowDate(),
            });
            this.downloadLoading = false;
          });
        });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return getLabelFromDicV2(this.$refs.crud.DIC, j, v[j]);
        })
      );
    },
  },
};
</script>
